import { Modal, Form, Button, Input, Select, Radio } from 'antd';
import React from 'react';
import List from "./List";

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const doRecharge = ({
  showRecharge,
  distributors,
  dispatch,
  rechargeLogId,
  rechargePath,
  currentType,
  currentUrl,
  currentSaleDistributor,
  shops,
  isCustomize,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll,
    resetFields,
    setFieldsValue
  },
  ...doRechargeProps,
}) => {
  const handleCancel = () => {
    showRecharge(false)
  };
  const currentTime = new Date().getTime();
  const handleOk = (e) => {
    e.preventDefault();
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (currentType === "tenant") {
          dispatch({
            type: 'recharge/shopRecharge',
            payload: {
              shopName: "测试店铺名称",
              billRecordType: "预付款",
              businessType: "8",
              paymentType: values.rechargeMode,
              paymentNum: "sales-" + Math.floor((Math.random() * 10000) + 1) + "-" + currentTime,
              paymentMoney: values.amountMoney,
              paymentTime: currentTime + 3,
              arrivedTime: currentTime
            }
          })
        } else {
          if (values.amountMoney === "customize") {
            const inputValue = document.getElementById("customizeAmount").value
            values.amountMoney = inputValue
            if (_.isEmpty(inputValue)) {
              Modal.error({
                title: '错误',
                content: '请输入自定义充值金额'
              })
              return
            }
            values.isCustomize = true
          }
          dispatch({
            type: 'recharge/tenantRecharge',
            payload: {
              ...values,
              rechargeId: rechargeLogId,
              payMoney: values.amountMoney,
              payerId: currentSaleDistributor.id,
              showUrl: window.location.href,
              chargeType: 'DISTRIBUTOR_RECHARGE'
            }
          })
        }
      }
    });
  };
  const setCustomizeEnabled = (option) => {
    console.info(option)
    dispatch({
      type: 'recharge/setCustomize',
      payload: {
        isCustomize: option
      }
    })
  }

  return (

    <Modal
      visible={doRechargeProps.visible}
      title="立即充值"
      onOk={handleOk}
      onCancel={handleCancel}
      width={430}
      destroyOnClose={true}
      footer={[
        <Button key="back" onClick={handleCancel}>取消</Button>,
        <Button key="submit" type="primary" htmlType="submit" onClick={handleOk} >
          充值
            </Button>,
      ]}>
      <Form >
        <FormItem
          label="充值金额："
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 28 }}
        >
          {getFieldDecorator('amountMoney', {
            rules: [
              { required: true, message: '请输入正确的金额' },
              { whitespace: true }
            ],
            // validateTrigger: "onSubmit"
          })(
            <RadioGroup onChange={(e) => {
              resetFields("isCustomize")
              //兼容safari
              if(e.target.value==='customize'){
                setCustomizeEnabled(false)
              } else{
                setCustomizeEnabled(true)
              }
            }}>
              <Radio onFocus={() => {
                setCustomizeEnabled(true)
              }} value="1000">1000</Radio>
              <Radio onFocus={() => {
                setCustomizeEnabled(true)
              }} value="5000">5000</Radio>
              <Radio onFocus={() => {
                setCustomizeEnabled(true)
              }} value="10000">10000</Radio>
              <Radio onFocus={() => {
                setCustomizeEnabled(true)
              }} value="30000">30000</Radio>
              <Radio value="customize" onFocus={() => {
                setCustomizeEnabled(false)
              }} >
                自定义：<Input disabled={isCustomize} id="customizeAmount" />
              </Radio>
            </RadioGroup>
          )}
        </FormItem>
      </Form>
    </Modal>

  );
};
export default Form.create()(doRecharge);
